<template>
  <div class="common-layout">
    <el-container>
      <!-- <el-header>Header</el-header> -->
      <el-container>
        <el-aside width="200px">
          <Menu :menuData="links" />
        </el-aside>
        <el-main><NuxtPage /></el-main>
      </el-container>
    </el-container>
  </div>
  <slot />

  <NotificationsSlideover />
</template>
<script setup lang="ts">
import Menu from "./menu.vue";
const toast = useToast();
const activeIndex = ref("/");
const links = [
  {
    label: "Home",
    icon: "i-lucide-house",
    to: "/",
  },
  {
    label: "Inbox",
    icon: "i-lucide-inbox",
    to: "/inbox",
    badge: "4",
  },
  {
    label: "Customers",
    icon: "i-lucide-users",
    to: "/customers",
  },
  {
    label: "Settings",
    to: "/settings",
    icon: "i-lucide-settings",
    defaultOpen: true,
    type: "trigger",
    children: [
      {
        label: "General",
        to: "/settings",
      },
      {
        label: "Members",
        to: "/settings/members",
      },
      {
        label: "Notifications",
        to: "/settings/notifications",
      },
      {
        label: "Security",
        to: "/settings/security",
      },
    ],
  },
];

onMounted(async () => {
  const cookie = useCookie("cookie-consent");
  if (cookie.value === "accepted") {
    return;
  }

  toast.add({
    title: "We use first-party cookies to enhance your experience on our website.",
    duration: 0,
    close: false,
    actions: [
      {
        label: "Accept",
        color: "neutral",
        variant: "outline",
        onClick: () => {
          cookie.value = "accepted";
        },
      },
      {
        label: "Opt out",
        color: "neutral",
        variant: "ghost",
      },
    ],
  });
});
</script>
